.DropdownMenuButton {
  @apply border-slate-200 p-2 rounded-tremor-default;
}

.DropdownMenuButton[data-open],
.DropdownMenuButton:hover {
  /* background: var(--active-unfocused); */
  @apply bg-slate-200;
}

.DropdownMenu {
  @apply z-50 absolute mt-2 divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none;

  & > .DropdownMenuItem {
    &:not(:first-child) {
      @apply -mt-px;
    }

    &:first-child:not(:last-child) {
      @apply rounded-b-none;
    }

    &:last-child:not(:first-child) {
      @apply rounded-t-none;
    }

    &:not(:first-child):not(:last-child) {
      @apply rounded-t-none rounded-b-none;
    }
  }
  /* background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 4px;
  border-radius: 6px;
  box-shadow:
    2px 4px 12px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(0, 0, 0, 0.1);
  outline: 0;
  z-index: 1000; */
}

.DropdownMenuItem {
  @apply flex w-full min-w-32 items-center gap-2 rounded-md px-2 py-2 text-sm;
  /* display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  width: 100%;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  text-align: left;
  line-height: 1.8;
  min-width: 110px;
  margin: 0;
  outline: 0; */
}

.DropdownMenuItem:focus {
  /* background: var(--highlighted); */
  @apply bg-slate-100;
}

.DropdownMenuItem[data-nested][data-open]:not([data-focus-inside]) {
  /* background: var(--highlighted); */
  @apply bg-slate-100;
}

.DropdownMenuItem[data-focus-inside][data-open] {
  /* background: var(--active-unfocused); */
  @apply bg-slate-100;
}
